<template>
  <transition name="bounce">
    <div class="search-content">
      <div class="history" v-if="!value && historyList && historyList.length">
        <div class="search-top">
          <span>搜索历史</span>
          <span class="delete" @click="deletes">
            <van-icon name="delete"/>
          </span>
        </div>
        <div class="search-history">
          <span v-for="(val,index) of historyList" :key="index" @click="vals(val)">{{val}}</span>
          <p class="more" @click="more" v-show="searchHistoryList.length>7">
            {{limit==7?'更多搜索历史':'收起搜索历史'}}
            <font :class="{tr:limit>7}">∨</font>
          </p>
        </div>
      </div>
      <div
        v-if="!list.length && !historyList.length && !len && !value"
        class="history history-empty"
      >暂无搜索历史</div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell
          v-for="item in list"
          :key="item.id"
          :title="item.keyword"
          @click="vals(item.keyword)"
        >
          <div>{{item.keyword}}</div>
        </van-cell>
      </van-list>
    </div>
  </transition>
</template>

<script>
import { vuexData } from "@/assets/js/mixin";
export default {
  mixins: [vuexData],
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    len: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      limit: 5,
      moreFlag: false,
      loading: false,
      finished: false
    };
  },
  computed: {
    historyList() {
      if (!this.searchHistoryList) {
        return;
      }
      return this.searchHistoryList.slice(0, this.limit);
    }
  },
  methods: {
    searchHistory() {
      this.setSearchHistory(this.value); // 加入搜索历史记录
    },
    more() {
      if (this.limit == 5) {
        this.moreFlag = true;
        this.limit = this.searchHistoryList.length;
      } else {
        this.limit = 5;
        this.moreFlag = false;
      }
    },
    vals(val) {
      this.$emit("vals", val);
    },
    deletes() {
      // 清空搜索历史记录
      this.$dialog
        .confirm({
          title: "提示",
          message: `确认删除搜索历史?`
        })
        .then(() => {
          this.clearSearchHistory();
        });
    },
    scrollToEnd() {
      this.$emit("scrollToEnd");
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      console.log("load");
      //   setTimeout(() => {
      //     for (let i = 0; i < 10; i++) {
      //       this.list.push(this.list.length + 1);
      //     }

      //     // 加载状态结束
      //     this.loading = false;

      //     // 数据全部加载完成
      //     if (this.list.length >= 40) {
      //       this.finished = true;
      //     }
      //   }, 1000);
    },
    detail(key) {
      this.setSearchHistory(key);
      console.log("key", key);
    }
  },

  created() {}
};
</script>

<style lang="stylus" scoped>
.search-content {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0px;
  z-index: 500;
  background: #fff;

  .scroll {
    height: 100%;
    overflow: hidden;

    .item {
      height: 50px;
      line-height: 50px;
      padding: 0 15px;
      box-sizing: border-box;
    }
  }

  .history-empty {
    text-align: center;
    margin-top: 100px;
  }

  .history {
    width: 100%;
    padding: .1rem .5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;

    .search-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: .4rem;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: .2rem;
    }

    .search-history {
      span {
        display: inline-block;
        background: #f7f7f7;
        padding: .2rem .3rem;
        border-radius: 15px;
        margin-right: .1rem;
        margin-bottom: .2rem;
        font-size: .3rem;
      }

      .more {
           color: #999;
    text-align: center;
    margin-top: .1rem;
    font-size: .4rem;

        font {
          display: inline-block;
          margin-left: 5px;
        }

        .tr {
          transform: rotate(180deg);
        }
      }
    }
  }

  .empty {
    text-align: center;
    margin-top: 100px;
    color: #999;
  }
}
</style>